<template>
    <div>
        <transition name="fade">
            <div class="style-3" v-if="templateStyle ==='style-3'">
                <div class="course_common_box">
                    <div class="course-content">
                        <div class="course-content-sentence">
                            <p>
                                {{content.sentence}}
                            </p>
                        </div>
                        <ul class="course-content-word">
                            <li v-for="(item,index) in chineseArr" @click="getOption(item,index,item.order)">
                                <div class="tb" :class="activeIndex===index&&'active'">{{item.chinese}}</div>
                            </li>
                        </ul>
                        <div class="course-content-img">
                            <loadingImage :src="addPrefixHost(content.image?content.image:'')"/>
                        </div>
                        <ul class="course-content-spell">
                            <li v-for="(item,index) in englishArr" @click="setOption(index,item.order)">
                                <div class="inside">
                                    <div class="tb">
                                        {{answerArr[index] && answerArr[index].chinese}}
                                    </div>
                                </div>
                                <em>{{item.english}}</em>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';
    import Vue from 'vue';

    export default {
        async fetch({store, params, isServer, redirect}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                activeIndex: null,
                activeItem: null,
                answerArr: [],
                correctArr: [],
                errorArr: [],
                isUpdate: false,
                errorMessage: "",
                xOrder: null,
            }
        },
        methods: {
            setOption(index, order) {
                if (this.activeItem != null) {
                    if (!this.answerArr[index]) {
                        Vue.set(this.answerArr, index, this.activeItem);
                        this.chineseArr.splice(this.activeIndex, 1);
                        this.activeItem = null;
                        this.activeIndex = null;
                    } else {
                        this.chineseArr.splice(this.activeIndex, 1);
                        this.chineseArr.push(this.answerArr[index]);
                        Vue.set(this.answerArr, index, "");
                        Vue.set(this.answerArr, index, this.activeItem);
                        this.activeItem = null;
                        this.activeIndex = null;
                    }
                } else {
                    if (this.answerArr[index]) {
                        this.chineseArr.push(this.answerArr[index]);
                        Vue.set(this.answerArr, index, "");
                        this.xOrder = null;
                    }
                }
                this.Answer(index, order, this.xOrder);
            },
            getOption(item, index, order) {
                this.xOrder = order;
                this.activeIndex = index;
                this.activeItem = item;
            },
            Answer(index, order, xOrder) {
                if (order === xOrder) {
                    this.errorArr[index] = 1;
                } else {
                    this.errorArr[index] = 0;
                }
                let answer = false;
                if (this.errorArr.toString() === this.correctArr.toString()) {
                    answer = true;
                }
                this.setAnswer({
                    answer: answer,
                    msg: R.join("<br>")(R.map(R.pipe(R.props(["chinese", "english"]), R.defaultTo([]), R.join("——")))(this.content.words ? this.content.words : ''))
                });
            },
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
            init() {
                this.$nextTick(_ => {
                    if (this.content.words) {
                        for (let i = 0; i < this.content.words.length; i++) {
                            this.correctArr.push(1);
                            this.errorArr.push(0);
                        }
                    }
                    this.setAnswer({
                        answer: false,
                        msg: R.join("<br>")(R.map(R.pipe(R.props(["chinese", "english"]), R.defaultTo([]), R.join("——")))(this.content.words ? this.content.words : ''))
                    });
                })
            }
        },
        mounted() {
            this.init();
        },
        created() {
        },
        computed: {
            chineseArr() {
                const arr = [];
                if (this.content.words) {
                    for (let i = 0; i < this.content.words.length; i++) {
                        arr.push({
                            chinese: this.content.words[i].chinese || "",
                            english: this.content.words[i].english || "",
                            order: i,
                        })
                    }
                }
                return arr.sort(function () {
                    return Math.random() - 0.5
                });
            },
            englishArr() {
                const arr = [];
                if (this.content.words) {
                    for (let i = 0; i < this.content.words.length; i++) {
                        arr.push({
                            chinese: this.content.words[i].chinese || "",
                            english: this.content.words[i].english || "",
                            order: i,
                        })
                    }
                }
                return arr.sort(function () {
                    return Math.random() - 0.5
                });
            },
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            },
            ...mapState('index/course/index', {
                courseExtendInfo: state => state.courseExtendInfo,
                contentData: state => state.contentInfo.content,
                templateStyle: state => state.templateStyle,
                content: state => state.contentInfo ? state.contentInfo.content : {},
                contentInfo: state => state.contentInfo,
            }),
        },
        watch: {
            contentInfo() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    activeIndex: null,
                    activeItem: null,
                    answerArr: [],
                    correctArr: [],
                    errorArr: [],
                    errorMessage: "",
                    xOrder: null,
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();
            },
        },
        components: {
            loadingImage
        }
    }
</script>

<style lang="less" scoped>
    .style-3 {

        .course_common_box {
            text-align: center;

            .course-content-sentence {
                p {
                    vertical-align: middle;
                    text-align: left;
                    font-size: .24rem;
                    display: inline-block;
                }
            }

            .course-content-word, .course-content-img, .course-content-spell {
                display: inline-block;
                vertical-align: middle;
            }

            .course-content-word {
                width: 210px;
                li {
                    width: 170px;
                    min-height: 50px;
                    padding: 0.03rem;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    background: #BE2C23;
                    font-size: 0.22rem;
                    color: white;
                    background: linear-gradient(#B43C0B 0, #901D1C 90%);
                    margin: 0.6rem 0.2rem 0.6rem 0.2rem;
                    cursor: pointer;
                    display: table;

                    div {
                        padding: 0 .02rem;
                        border: 0.01rem solid #FB984B;
                        box-sizing: border-box;
                        /*&:hover {*/
                            /*background: linear-gradient(#901D1C 0, #D9151B 90%);*/
                        /*}*/
                        &.active {
                            background: linear-gradient(#901D1C 0, #D9151B 90%);
                        }
                    }

                }
            }
            .course-content-img {

                margin: 0 20px 0 20px;
                img {
                    max-width: 5.5rem;
                    max-height: 2.5rem;
                    border-radius: 5px;
                }
            }

            .course-content-spell {
                li {
                    margin: .4rem .2rem;
                    .inside {
                        width: 170px;
                        min-height: 50px;
                        display: table;
                        font-size: 22px;
                        color: white;
                        cursor: pointer;
                        padding: 0 .03rem;
                        background: #681515;
                        border-left: 0.02rem solid #901D1C;
                        border-bottom: 0.02rem solid #901D1C;
                        box-shadow: -0.03rem 0.01rem 0.05rem black inset;
                        box-sizing: border-box;
                    }
                    em {
                        width: 170px;
                        display: block;
                        font-size: .22rem;
                    }
                }

                /*li:hover {*/
                /*background: linear-gradient(#A91515 0, #911515 90%);*/
                /*}*/
            }
        }

    }
</style>
